<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue 示例</title>
</head>
<body>
<div id="components-demo">
  <button-counter></button-counter>
   <button-counter></button-counter>
    <button-counter></button-counter>
</div>
<!-- 自动识别最新版本的vue.js -->
<script src="https:unpkg.com/vue/dist/vue.min.js"></script>
<script>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
//定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {1
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
new Vue({ el: '#components-demo' })
</script>
</script>
</body>
</html>  